<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="img/lable.jpg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hollow Clock Pro</title>
    <style>
        body {
            background-color: #444444;
        }

        .container {
            display: flex;
            flex-direction: row;
            height: 100vh;
        }

        .left-panel,
        .right-panel {
            flex-basis: 30%;
            background-color: #333333;
        }

        .center-panel {
            flex-basis: 40%;
            background-color: #555555;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            border: 2px solid rgb(217, 111, 221);
            border-radius: 10px;
            padding: 2rem;
            box-sizing: border-box;
        }

        .center-panel h1 {
            color: rgb(229, 139, 238);
            font-size: 2rem;
            margin-bottom: 1rem;
            text-align: center;
        }

        .center-panel img {
            height: 261px;
            width: 500px;
            border: 2px solid rgb(229, 127, 231);
            border-radius: 20px;
            margin-bottom: 2rem;
        }

        .time,
        .IP {
            font-weight: 800;
            height: 40px;
            width: 240px;
            text-align: center;
            background-color: rgb(255, 255, 255);
            border: 2px solid rgb(65, 64, 64);
            line-height: 40px;
            border-radius: 20px;
            margin-bottom: 1rem;
        }

        .night {
            text-align: center;
        }

        button {
            background-color: rgb(231, 129, 240);
            height: 30px;
            width: 100px;
            border-radius: 10px;
        }

        button.button_night_mode {
            height: 30px;
            width: 240px;
            border-radius: 10px;
            margin-bottom: 1rem;
        }

        button:hover {
            background-color: #87ec71;
        }

        select {
            background-color: rgb(255, 255, 255);
            height: 20px;
            width: 60px;
            border-radius: 8px;
        }

        @media only screen and (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .left-panel,
            .right-panel {
                display: none;
            }

            .center-panel {
                flex-basis: 100%;
                border-radius: 0;
                border: none;
                padding: 1rem;
            }

            .center-panel h1 {
                font-size: 1.5rem;
                margin-top: 1rem;
            }

            .center-panel img {
                height: 156px;
                width: 300px;
                border: 2px solid white;
                border-radius: 20px;
                margin-bottom: 2rem;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left-panel"></div>
        <div class="center-panel">
            <h1>云晟优-Hollow Clock Pro</h1>
            <img src="img/clock.jpg" alt="clock">
            <div class="time">
                当前网络时间 : <span id="TimeValue">0</span>
            </div>
            <div class="IP">
                局域网IP : <span id="LocalIP">0</span>
            </div>
            <div>
                <button type="button" onclick="sendData(0)">关闭LED灯效</button>
                <span style="padding-left:30px;"></span>
                <button type="button" onclick="sendData(1)">RGB流水灯效</button>
                <br><br>
                <button type="button" onclick="sendData(3)">银蓝光环灯效</button>
                <span style="padding-left:30px;"></span>
                <button type="button" onclick="sendData(4)">固定渐变灯效</button>
                <br><br>
            </div>
            <div class="night">
                <button id="Night_Mode" type="button" class="button_night_mode" onclick="Night_Control()">夜间模式开关
                    (当前:<span id="Night_Mode_Value">0</span>)</button>
                <br>
                <select id="time_table1">
                    <script>
                        for (var i = 0; i < 24; i++) {
                            var hour = i.toString().padStart(2, '0');
                            var option = document.createElement('option');
                            option.value = i;
                            option.textContent = hour + ':00';
                            document.getElementById('time_table1').appendChild(option);
                        }
                    </script>
                </select>
                <select id="time_table2">
                    <script>
                        for (var i = 0; i < 24; i++) {
                            var hour = i.toString().padStart(2, '0');
                            var option = document.createElement('option');
                            option.value = i;
                            option.textContent = hour + ':00';
                            document.getElementById('time_table2').appendChild(option);
                        }
                    </script>
                </select>
                <button onclick="save_night_time_value()">设置夜间模式</button>
            </div>
        </div>
        <div class="right-panel"></div>
    </div>
</body>

<script>
    //灯效控制函数
    function sendData(led) {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "setLED?LEDstate=" + led, true);
        xhttp.send();
    }
    //夜间模式控制函数
    var nightModeValue = 0;
    function Night_Control() {
        nightModeValue = (nightModeValue === 0) ? 1 : 0;
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "Night_Mode?Night_Mode_Value=" + nightModeValue, true);
        xhttp.send();
    }
    //设置夜间模式时间段
    function save_night_time_value() {
        var savedValue1 = document.getElementById("time_table1").value;
        var savedValue2 = document.getElementById("time_table2").value;
        
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "Set_Night_Time?time1=" + savedValue1 + "&time2=" + savedValue2, true);
        xhttp.send();
        alert("设置夜间模式成功!" + "\n时钟将会在"+ savedValue1 + "—" + savedValue2 +"点关闭灯效");// 提示保存成功
    }
    //5000mSeconds update rate
    setInterval(function () {
        getTime();
        getLocalIP();
        getNightMode();
    }, 1000);
    //获取当前网络时间
    function getTime() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("TimeValue").innerHTML =
                    this.responseText;
            }
        };
        xhttp.open("GET", "readTime", true);
        xhttp.send();
    }
    //获取时钟本地IP
    function getLocalIP() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("LocalIP").innerHTML =
                    this.responseText;
            }
        };
        xhttp.open("GET", "getIP", true);
        xhttp.send();
    }
    //获取夜间模式状态
    function getNightMode() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("Night_Mode_Value").innerHTML =
                    this.responseText;
            }
        };
        xhttp.open("GET", "Night_Mode_State", true);
        xhttp.send();
    }
</script>

</html>